<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>

		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="static/js/jquery.js"></script>
		<script type="text/javascript" src="static/js/qrcode.min.js"></script>
	</head>

	<body>
		<div id="container">
			<!--顶部导航条 -->
			<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd">
						<a href="#" target="_top" class="h">亲，请登录</a>
						<a href="#" target="_top">免费注册</a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
				</div>
				<div class="topMessage mini-cart">
					<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
				</div>
				<div class="topMessage favorite">
					<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
			</ul>
			</div>

			<!--悬浮搜索框-->

			<div class="nav white">
				<div class="logo"><img src="static/images/logo.png" /></div>
				<div class="logoBig">
					<li><img src="static/images/logobig.png" /></li>
				</div>

				<div class="search-bar pr">
					<a name="index_none_header_sysc" href="#"></a>
					<form>
						<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
						<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
					</form>
				</div>
			</div>

			<div class="clear"></div>

			<div style="background: lightgrey; height: 600px; margin-top: 40px; padding: 15px;">
				<div style="width:65%; background: white; height: 540px; margin: auto; padding-left: 50px;">
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<h3>订单编号：{{orderInfo.orderId}}</h3>
					<p>&nbsp;</p>
					<h3>订单金额：￥ {{orderInfo.totalPrice}}</h3>
					<hr/>
					<div id="div1">
						<div id="payQrcodeDiv" style="width: 200px; height: 200px;"></div>	
					</div>
				</div>
			</div>
		
		<!--操作页面-->
		<div class="theme-popover-mask"></div>
		<div class="theme-popover">
				<div class="theme-span"></div>
				<div class="theme-poptit h-title">
					<a href="javascript:;" title="关闭" class="close">×</a>
				</div>
				<div class="theme-popbod dform">
					<form class="theme-signin" name="loginform" action="" method="post">

						<div class="theme-signin-left">

							<li class="theme-options">
								<div class="cart-title">颜色：</div>
								<ul>
									<li class="sku-line selected">12#川南玛瑙<i></i></li>
									<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
								</ul>
							</li>
							<li class="theme-options">
								<div class="cart-title">包装：</div>
								<ul>
									<li class="sku-line selected">包装：裸装<i></i></li>
									<li class="sku-line">两支手袋装（送彩带）<i></i></li>
								</ul>
							</li>
							<div class="theme-options">
								<div class="cart-title number">数量</div>
								<dd>
									<input class="min am-btn am-btn-default" name="" type="button" value="-" />
									<input class="text_box" name="" type="text" value="1" style="width:30px;" />
									<input class="add am-btn am-btn-default" name="" type="button" value="+" />
									<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
								</dd>

							</div>
							<div class="clear"></div>
							<div class="btn-op">
								<div class="btn am-btn am-btn-warning">确认</div>
								<div class="btn close am-btn am-btn-warning">取消</div>
							</div>

						</div>
						<div class="theme-signin-right">
							<div class="img-info">
								<img src="static/images/kouhong.jpg_80x80.jpg" />
							</div>
							<div class="text-info">
								<span class="J_Price price-now">¥39.00</span>
								<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</div>
						</div>

					</form>
				</div>
			</div>
		<!--引导 -->
		<div class="navCir">
			<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>	
			<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>					
		</div>
		</div>
		<script type="text/javascript" src="static/js/cookie_utils.js" ></script>
		<script type="text/javascript" src="static/js/vue.js" ></script>
		<script type="text/javascript" src="static/js/axios.min.js" ></script>
		<script type="text/javascript" src="static/js/jquery-3.4.1.min.js" ></script>
		<script type="text/javascript" src="static/js/qrcode.min.js"></script>
		<script type="text/javascript" src="static/js/base.js" ></script>
		<script type="text/javascript">
			
			var vm = new Vue({
				el:"#container",
				data:{
					orderInfo:{}
				},
				//vue声明周期 ：  创建对象---beforeCreate---初始化data---created---加载模版---beforeMount---渲染数据---mounted
				created:function(){
					var jsonstr = localStorage.getItem("orderInfo");
					if(jsonstr!=null){
						localStorage.removeItem("orderInfo");
					}
					this.orderInfo = eval("("+jsonstr+")");
				},
				mounted:function(){
					//渲染二维码
					var qrcode = new QRCode($("#payQrcodeDiv")[0],{
						width:200,
						height:200
					});
					qrcode.makeCode(this.orderInfo.payUrl);
					
					//前端发送websocket连接请求
					var webSocketUrl = webSocketBaseUrl1 + "webSocket/"+ this.orderInfo.orderId;
					var websocket = new WebSocket( webSocketUrl );
					//只要后端通过websocket向此连接发消息就会触发onmessage事件
					websocket.onmessage = function(event){
						var msg = event.data;
						if(msg=="1"){
							$("#div1").html("<label style='font-size:20px; color:green'>订单支付完成！</label>");
						}
					}
					
					//轮询访问是否付款
					/**
					var oid = this.orderInfo.orderId;
					var i = setInterval(function(){
						console.log("-----");
						var url = baseUrl+"order/status/"+oid;
						axios({
							url:url,
							method:"get",
							headers:{
								token:getCookieValue("token")
							}
						}).then((res)=>{
							if(res.data.data == "2"){
								$("#div1").html("<label style='font-size:20px; color:green'>订单支付完成！</label>");
								clearInterval(i);
							}
						});
					},1000);**/
					
				}
			});
		</script>
		
		
	</body>

</html>